    <h4>{{ _( "Status" ) }}</h4>
    <table id="status" class="table table-bordered table-striped">
        <thead>
            <tr>
                <th width="25%">{{ _( "Property" ) }}</th>
                <th>{{ _( "Value" ) }}</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{ _( "IPv6 Tunnel" ) }}</td>
                <td id="ipv6-tunnel"></td>
            </tr>
        </tbody>
    </table>
    <div class="row-fluid">
        <div class="span6">
            <button class="btn btn-primary btn-block" id="switch_ipv6_tunnel_enable" type="submit">{{ _( "Enable" ) }}</button>
            <button class="btn btn-primary btn-block" id="switch_ipv6_tunnel_disable" type="submit">{{ _( "Disable" ) }}</button>
        </div> <!-- .span6 -->
        <div class="span6">
            <button class="btn btn-primary btn-block" id="switch_ipv6_tunnel_test" type="submit">{{ _( "Test teredo usability" ) }}</button>
            <button class="btn btn-primary btn-block" id="switch_ipv6_tunnel_change_server" type="submit">{{ _( "Change teredo server" ) }}</button>
        </div> <!-- .span6 -->
    </div> <!-- .row-fluid -->
    <div class="row-fluid">
        <div class="span12">
            <div id="logs" class="tab-pane">
                <div id="log" class="span12"></div>
            </div> <!-- #log -->
        </div>
    </div>

<script type="text/javascript">
    function updateStatus(selector, content) {
        var previousContent = $(selector).html();
        if (String(previousContent) != String(content)) {
            $(selector).html(content);
        }
    }
    /*
    function SwitchButtonEnable() {
        if ($('#switch_ipv6_tunnel').hasClass("btn-inverse")) {
            $('#switch_ipv6_tunnel').removeClass('btn-inverse');
            $('#switch_ipv6_tunnel').addClass('btn-primary');
        }
        $('#switch_ipv6_tunnel').html('{{ _( "Enable" ) }}');
    }
    function SwitchButtonDisable() {
        if ($('#switch_ipv6_tunnel').hasClass("btn-inverse")) {
            $('#switch_ipv6_tunnel').removeClass('btn-inverse');
            $('#switch_ipv6_tunnel').addClass('btn-primary');
        }
        $('#switch_ipv6_tunnel').html('{{ _( "Disable" ) }}');
    }*/
</script>
<script type="text/javascript">
    var scriptIsRunning = false;

    $('button.btn').click(function () {
        var cmd = "stop";
        if ($(this).attr('id') == 'switch_ipv6_tunnel_enable') {
            if ($('td#ipv6-tunnel').html() == '{{ _("enable")}}' &&
                !confirm('{{ _("IPv6 Tunnel")}}{{ _( "enable" ) }}{{ _( ", are you sure to continue?" ) }}')) {
                return;
            }
            cmd = "enable";
        } else if ($(this).attr('id') == 'switch_ipv6_tunnel_disable') {
            if ($('td#ipv6-tunnel').html() == '{{ _("disabled")}}' &&
                !confirm('{{ _("IPv6 Tunnel")}}{{ _( "disabled" ) }}{{ _( ", are you sure to continue?" ) }}')) {
                return;
            }
            cmd = "disable";
        } else if ($(this).attr('id') == 'switch_ipv6_tunnel_test') {
            cmd = "test_teredo";
        } else if ($(this).attr('id') == 'switch_ipv6_tunnel_change_server') {
            cmd = "set_best_server";
        } else {
            return;
        }

        if (scriptIsRunning == true) {
            tip('{{ _("Script is running, please retry later.") }}', 'warning');
            return;
        }
        
        window.timer.play();
        tip('{{ _("Current status: ") }}"' + $(this).html() + '" {{ _("Running ...") }}', 'info');
        scriptIsRunning = true;

        $.ajax({
            type: 'GET',
            url: '/module/gae_proxy/control/ipv6_tunnel?cmd=' + cmd,
            dataType: 'JSON',
            success: function (result) {
                window.timer.stop();
                /*
                $('.alert').html('{{ _("Current status: ") }}{{ _("idle") }}');
                if (!tipHasClose()) {
                    tipClose();
                }*/
                scriptIsRunning = false;
                tip(result['res'], 'info');
                updateProcess();
            },
            error: function (result) {
                window.timer.stop();
                scriptIsRunning = false;
                tip('{{ _("No response from process: ")}}{{ _("GAEProxy")}}{{ _(". It might have already exited.")}}', 'warning', false);
                updateProcess();
            }
        });
    });
</script>
<script type="text/javascript">
    function updateLog(logContent) {
        $('#log').html(logContent.replace(/\n/g, '<br>'));
    }

    function updateProcess() {
        $.ajax({
            type: 'GET',
            url: '/module/gae_proxy/control/ipv6_tunnel?cmd=get_log',
            dataType: 'JSON',
            success: function (result) {
                if (result['status'] == 'enable') {
                    updateStatus('td#ipv6-tunnel', '{{ _("enable")}}');
                } else if (result['status'] == 'disabled') {
                    updateStatus('td#ipv6-tunnel', '{{ _("disabled")}}');
                }
                updateLog(result['log']);

                /*
                if (result['status'] == 'enable') {
                    SwitchButtonDisable();
                } else if (result['status'] == 'disabled') {
                    SwitchButtonEnable();
                }*/

                if (window.isAutoScrollLog == true) {
                    $('#log').scrollTop($('#log')[0].scrollHeight);
                }
            }
        });
    }
</script>
<script type="text/javascript">
    $(function () {
        window.timer = $.timer(function () {
            updateProcess();
        });

        window.timer.set({
            time: 1000,
            autostart: false
        });

        updateProcess();
    });
</script>
<script type="text/javascript">
    $(function () {
        resizeLogWindow();
    });
    $(window).resize(function () {
        resizeLogWindow();
    });
    function resizeLogWindow() {
        var windowHeight    = $(window).height(),
            preservedHeight = 500;

        $('#log').css('height', windowHeight - preservedHeight);
    }
</script>